<template>
	<u-popup :show="props.show" mode="bottom" :round="round" @close="onClose">
		<view class="popup-body">
			<view v-if="title" class="popup-header">
				<view class="title">{{ props.title }}</view>
				<uni-icons
					v-if="close"
					class="close-icon" 
					type="closeempty" 
					size="48rpx" 
					color="#707070" 
					@click="onClose"
				/>
			</view>
			<view class="popup-content">
				<slot></slot>
			</view>
			<view class="popup-bottom">
				<button
					v-if="props.cancel"
					:class="['cancel', {'single-button': props.cancel && !props.confirm}]"
					@click="onCancel"
				>
					{{ cancelText }}
				</button>
				<button
					v-if="props.confirm"
					:class="['confirm', {'single-button': props.confirm && !props.cancel}]"
					@click="onConfirm"
				>
					{{ confirmText }}
				</button>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	const emits = defineEmits(['update:show', 'close', 'cancel', 'confirm']);
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		confirm: {
			type: Boolean,
			default: false,
		},
		confirmText: {
			type: String,
			default: '确定',
		},
		cancel: {
			type: Boolean,
			default: false,
		},
		cancelText: {
			type: String,
			default: '取消',
		},
		// 右上角关闭按钮
		close: {
			type: Boolean,
			default: true,
		},
		// 圆角
		round: {
			type: Number,
			default: 10,
		},
	});
	
	const onClose = (): void => {
		emits('update:show', false);
		emits('close', false);
	}
	const onCancel = (): void => {
		emits('cancel', false);
	}
	const onConfirm = (): void => {
		onClose();
		emits('confirm');
	}
</script>

<style lang="scss" scoped>
	.popup-body {
		padding: 40rpx;
		
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-content: center;
			margin-bottom: 20rpx;
			.title {
				line-height: 32rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}
			.close-icon {
				margin-top: -5rpx;
				margin-right: -5rpx;
			}
		}
		
		.popup-content {
			padding-bottom: 30rpx;
		}
		
		.popup-bottom {
			display: flex;
			justify-content: space-between;
			.cancel,
			.confirm {
				width: 322rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #545454;
				margin: 0;
				&::after {
					border: 0;
				}
			}
			.confirm {
				background-color: $uni-color-primary !important;
				color: #ffffff !important;
			}
			.single-button {
				width: 100% !important;
			}
		}
	}
</style>